<template>
	<router-layout>
	<div class="pageBg padd">
		<div class="popmain" id="popmain">
			<div class="mbox">
				<div class="tick_t">
					<span>{{date}}</span>
					<span class="week">{{Week}}</span>
					<span>{{DepartTime}}</span>
					<span>发车</span>
					<span class="arrTime" v-show="HasArriveTime">约{{ArriveTime}}到达</span>
				</div>
				<div class="tick_b">
					<div class="lineimg">
						<img src="@/assets/images/searchBus/line.png" />
					</div>
					<div class="tick_m">
						<ul>
							<li class="tick_item">
								<div class="printName">{{StartPrintName}}</div>
								<!-- <div class="location">起始站位置<span><img src="@/assets/images/searchBus/map.png"/></span></div> -->
							</li>
							<li class="tick_item">
								<div class="printName stopname">{{StopName}} <span class="way" v-show="isStop">(途经)</span></div>
								<!-- <div class="location">终点站位置<span><img src="@/assets/images/searchBus/map.png"/></span></div> -->
							</li>
						</ul>
					</div>
				</div>
				<div class="ticket_bottom">
					<div class="tick_f">
						发车前60分钟可退票
					</div>
					<div class="ticket_line" @click="showLineDetail">
						线路详情 >
					</div>
				</div>
			</div>
			<div class="mbox padd0">
				<div class="enger_t">
					<div class="title">
						乘客
					</div>
					<van-button class="add" @click="addPassEnger">添加</van-button>
				</div>
				<pass-enger ref="passEnger" @showBar="showBar" @hideBar="hideBar" @addFinish="addEngerFinish" @toAddPassEnger="toAddPassEnger"></pass-enger>
			</div>
			<div class="mbox phonebox">
				<van-field 
				  label-width="73"
				  v-model="phonenum"
					label="取票号码"
					placeholder="请填写取票手机号码" 
					clearable 
					type="tel" 
					label-class="phonenum"
				/>
			</div>
			<div class="agree">
				订单包含汽车票.附加选购产品、部分车站含服务费点击去支付表示已阅读并同意<span @click="infoShow">购票须知</span>
			</div>
			<!-- 线路详情弹窗 -->
			<van-popup
				v-model="busLineShow" 
				class="linePop" 
				@closed="lineClose"
			>
				<div>
					<div class="linepop_t">线路详情</div>
					<div class="linepop_b">
						<van-loading color="#1989fa" type="spinner"  class="lineLoad" v-show="loading" />
						<ul>
							<li v-for="item in busLine">
								<div class="line_l">
									{{item.Mile}}
								</div>
								<div class="line_r">
									{{item.StopName}} <span class="way" v-show="item.StopName == StopName">(下)</span>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</van-popup>
			<!-- 购票须知弹窗 -->
			<van-popup 
				v-model="popInfoShow" 
				class="infoPop" 
				@closed="infoClose"
			>
				<div class="popBox">
					<div class="info_t">购票须知</div>
					<div class="sure" @click="sure">知道了</div>
					<div class="infoPopbox">
						<div class="info_b">
							<h2>【购票须知】</h2>
							<p>1、网络购票受各地客运站的不同规定及要求,无法承诺100%出票成功。如购票未成功,您的资金将1-7个工作日全额退还至原支付账户。</p>
							<p>2、成人及身高超过1.5米的儿童须购买全价票,供给座位。</p>
							<p>3、身高1.2米至1.5米之间的儿童购买半价儿童票,供给座位。</p>
							<p>4、网络购票启用实名登记,各类旅客都需提供真实姓名和证件号码(目前支持身份证),学生票、军人票或其他类型的优惠票种请到客运站窗口购买。注意请携带购票时对应的有效身份证件或户口簿(针对没有身份证的儿童群体)前往客运站乘车。</p>
							<h2>【取票须知】</h2>
							<p>1、请至少提前1小时(节假日建议提前2小时)凭取票信息及身份证到客运站取票机或售票窗口取票。</p>
							<p>2、暂不支持异地取票,部分车站不支持发车后自助机或窗口取票。</p>
							<p>3、部分客运站支持不取票、刷身份证检票上车,具体以客运站提示为准。</p>
						</div>
					</div>
				</div>
			</van-popup>
			<!-- 明细弹窗 -->
			<van-popup
			class="pricePop"
			v-model="detailShow"
			position="bottom" 
			get-container="#popmain"
			>
				<div class="popbody">
					<div class="title">费用明细</div>
					<div class="priceitem" v-show="FullNumber">
						<div>全票</div>
						<div class="orangeP">¥{{Price}} x {{FullNumber}}人</div>
					</div>
					<div class="priceitem" v-show="HalfNumber">
						<div>半价票</div>
						<div class="orangeP">¥{{HalfPrice}} x {{HalfNumber}}人</div>
					</div>
					<div class="priceitem">
						<div>服务费</div>
						<div class="orangeP">¥{{sePrice}} x {{FullNumber + HalfNumber}}人</div>
					</div>
				</div>
			</van-popup>
		</div>
		<div class="subBar" v-show="barShow">
			<div class="price">
				<span>¥</span>{{totalPrice}}
			</div>
			<div class="sunbarR">
				<div class="detail" @click="getPriceDetail">
					<span>明细</span>
					<span class="arrow" :class="{rotate: detailShow}"></span>
				</div>
				<van-button class="topay" @click="topay">去支付</van-button>
			</div>
		</div>
	</div>
	</router-layout>
</template>
<script>
	
	import passEnger from '@/components/common/passenger/PassEnger.vue'
	import authMixin from '@/mixin/mixin'
	export default {
		data() {
			return {
				loading:true,  //线路详情请求加载中
				phonenum:'',
				StartPrintName:'',
				StopName:'',
				StopCode:'',
				EndStopName:'',
				ScheduleCode:'',
				DepartTime:'',
				ArriveTime:'',
				StationCode:'',
				isStop:false,  //是否途经车
			  date:'',
				Week:'',
				HasArriveTime: true,
				passEnger:[],
				detailShow:false, //价格明细
				barShow:true,
				popInfoShow:false,  //汽车票预定协议
				busLineShow:false,
				stopTrue:false,
				busLine:[],        //线路详情
				Price:0,       //全票价
				HalfPrice:0,  //半票价
				sePrice:0,    //服务费
				FullNumber:0,  //全价票人数
				HalfNumber:0,   //半价票人数
			  sNumber:0,       //服务费人数即总人数 
				totalPrice: 0,   //总价
				DepartDate:'',
				DepartDateTime:'',
				create_time:0 //订单创建时间
			}
		},
		mixins:[authMixin],
		components:{
			passEnger
		},
		created(){
			this.getRouterData()
			this.getStops()
			this.getServicePrice()
			this.DepartDate = `${new Date().getFullYear()}-${this.date.split('月')[0]}-${this.date.split('月')[1].split('日')[0]}`
		  this.DepartDateTime = `${this.DepartDate} ${this.DepartTime}`
		},
		mounted(){
			
		},
		watch:{
			sePrice(){
				this.$nextTick(()=>{
					this.getTotalPrice()
				})
			}
			},
		methods:{
			getRouterData(){
				this.StartPrintName = this.$route.query.StartPrintName
				this.StopName = this.$route.query.StopName
				this.EndStopName = this.$route.query.EndStopName
				this.StopCode = this.$route.query.StopCode
				this.ScheduleCode = this.$route.query.ScheduleCode
				this.DepartTime = this.$route.query.DepartTime
				this.date = this.$route.query.date
				this.Week = this.$route.query.Week
				this.StationCode = this.$route.query.StationCode
				this.Price = Number(this.$route.query.Price).toFixed(2)
				this.HalfPrice = Number(this.$route.query.HalfPrice).toFixed(2)
				if(this.$route.query.ArriveTime!== 'undefined'){
					this.ArriveTime = this.$route.query.ArriveTime
					this.HasArriveTime = true
				}else{
					this.HasArriveTime = false
				}
				this.StopName === this.EndStopName ? this.isStop = false : this.isStop = true
				// console.log(this.date)
				// console.log(this.DepartTime)
				console.log(this.ScheduleCode)
				console.log(this.StationCode)
				console.log(this.Price)
				console.log(this.HalfPrice)
			},
			getStops(){
				//线路详情
				let DepartDate = `${new Date().getFullYear()}-${this.date.split('月')[0]}-${this.date.split('月')[1].split('日')[0]}`
				this.$request({
					method:"post",
					url:"/index/stops",
					data:{
						DepartDate: DepartDate,
						ScheduleCode: this.ScheduleCode,
						StationCode: this.StationCode
					}
				}).then(res=>{
					  console.log(res)
						if(res.data && res.data.length){
							this.loading = false
							res.data.forEach(item=>{
								let obj=`{
									"Mile":"${item.Mile} 公里",
									"StopName":"${item.StopName}"
								}`
								this.busLine.push(JSON.parse(obj))
							})
							let startStation =`{
									"Mile":"${this.DepartTime} 发车",
									"StopName": "${this.StartPrintName}"
							}`
							this.busLine.unshift(JSON.parse(startStation))
						}
				})
					
			},
			addPassEnger(){
				//乘客添加
				this.$refs.passEnger.show = true
				this.barShow = false
			},
			getPriceDetail(){
				this.detailShow = !this.detailShow
				this.$refs.passEnger.show = false
			},
			showBar(){
				this.barShow = true
			},
			hideBar(){
				this.barShow = false
			},
			infoShow(){
				//购票须知
				this.popInfoShow = true
				this.barShow = false
			},
			infoClose(){
				this.barShow = true
			},
			sure(){
				this.popInfoShow = false
			},
			showLineDetail(){
				this.busLineShow = true
				this.barShow = false
			},
			lineClose(){
				this.barShow = true
			},
			getServicePrice(){
				//请求获取服务费
				this.$request({
					method:"get",
					url:"/order/service_charge"
				}).then(res=>{
					if(res.data && res.data.length){
						this.sePrice = res.data
						console.log(this.sePrice)
					}
				})
				
			},
			getTotalPrice(){
				// 计算支付价格
				let totalTicketPrice = 0
				let totalNum = 0
				if(this.FullNumber){
					totalTicketPrice += this.Price * this.FullNumber 
					totalNum += this.FullNumber 
					 if(this.HalfNumber){
						 totalTicketPrice += this.HalfPrice * this.HalfNumber
						 totalNum += this.HalfNumber
					 }
				}else{
					if(this.HalfNumber){
						totalTicketPrice += this.HalfPrice * this.HalfNumber
						totalNum += this.HalfNumber
					}
				}
				totalTicketPrice = totalTicketPrice + totalNum * this.sePrice
				this.totalPrice = totalTicketPrice.toFixed(2)
			},
			addEngerFinish(){
				//购票乘客变化时
				this.FullNumber = this.$refs.passEnger.FullNumber
				this.HalfNumber = this.$refs.passEnger.HalfNumber
				this.getTotalPrice()
			},
			toAddPassEnger(){
				//新增乘客跳转
				this.$router.push({
					path:"/addPassenger",
					query:{
						StartPrintName: this.StartPrintName,
						StopName: this.StopName,
						EndStopName: this.EndStopName,
						ScheduleCode: this.ScheduleCode,
						DepartTime: this.DepartTime,
						date: this.date,
						Week: this.Week,
						StationCode: this.StationCode,
						StopCode: this.StopCode,
						Price: this.Price,
						HalfPrice:this.HalfPrice,
						ArriveTime:this.ArriveTime
					}
				})
			},
			topay(){
				// 去支付
				
				let reg = /^[1][3,4,5,7,8][0-9]{9}$/ //手机号正则验证
				let phone = this.phonenum
				let passEnger = this.$refs.passEnger.CheckPassEnger.length
				let card_ids = JSON.stringify(this.$refs.passEnger.Card_Ids)
        console.log(this.StopCode)
				if(this.FullNumber == 0 && this.HalfNumber !== 0){
					this.$toast({
						message: '不支持只购买半票',
						forbidClick: true,
					})
				}else if(this.FullNumber < this.HalfNumber ){
					this.$toast({
						message: '半票数不能超过全票数',
						forbidClick: true,
					})
				}else if (!phone) {
					this.$toast({
						message: '请输入取票手机号',
						forbidClick: true,
					})	
				}else if (!reg.test(phone)){
					this.$toast({
						message: '请输入正确的手机号',
						forbidClick: true,
					})
				}else if(!passEnger){
					this.$toast({
						message: '请添加购票乘客',
						forbidClick: true,
					})
				}else{
					// 
					this.$toast.loading({
						loadingType: 'spinner',
					  forbidClick: false,
						duration:0 
					})
					this.$request({
						method:'post',
						url:'/order/create',
						data:{
							card_ids: JSON.parse(card_ids),
							phone: phone,
							full_ticket_price: this.Price,
							half_fare_price: this.HalfPrice,
							depart_date: this.DepartDateTime,
							schedule_code: this.ScheduleCode,
							station_code: this.StationCode,
							station_name: this.StartPrintName,
							stop_code: this.StopCode,
							stop_name: this.StopName,
							totalPrice: this.totalPrice
						}
					}).then(res=>{
						this.$toast.clear()
						console.log(res)
						this.create_time = res.create_time * 1000
						if(res.message == '已有订单,请处理' || res.code == 1000){
							this.barShow = false
							this.$dialog.confirm({
							  message: '已有订单,请先处理'
							}).then(()=>{
								this.barShow = true
								this.$router.push('/orderList')
							}).catch(()=>{
								this.barShow = true
							})
						}else if(res.message == '成功' || res.code == 200){
							this.$router.replace({
								path:'/orderDetail',
								query:{
									card_ids: card_ids,
									phone: phone,
									full_ticket_price: this.Price,
									half_fare_price: this.HalfPrice,
									depart_date: this.DepartDateTime,
									schedule_code: this.ScheduleCode,
									station_code: this.StationCode,
									station_name: this.StartPrintName,
									stop_code: this.StopCode,
									stop_name: this.StopName,
									totalPrice: this.totalPrice,
									orderNumber: res.order_number,
									create_time: this.create_time
								}
							})
						}else if(res.message == '锁座位失败:余座不足' || res.code == 9){
							this.$toast({
								message: '余票不足',
								forbidClick: true,
							})
						}else if(res.message == '买票的时间和汽车发车的时间间隔过短' || res.code == 1001){
							this.$toast({
								message: '买票的时间和汽车发车的时间间隔过短',
								forbidClick: true,
							})
						}
					}).catch(err=>{
						this.$toast.clear()
						if(err.message.includes('timeout')){
							this.$toast('请求超时')
						}
						
					})
					
					//
				}
			  //////
			}		
		}
	}
</script>

<style scoped>

	.mbox{
		background: #fff;
		border-radius: 0.2rem;
		padding: .3rem .4rem;
		margin-bottom: .35rem;
		height: auto;
		overflow: hidden;
		margin-left: .3rem;
		margin-right: .3rem;
	}
	.tick_t span{
		font-size: .4rem;
		margin-right: .15rem;
	}
	.tick_t span.week{
		margin-left: .2rem;
	}
	.tick_b{
		padding: .4rem 0 .55rem 0;
		border-bottom:0.02667rem solid #ebedf0;
	}
	.tick_f{
		font-size: .33rem;
		color: #3ABB67;
	}
	.lineimg{
		padding-top: .15rem;
		float: left;
		height: 1rem;
	}
	.lineimg img{
		height: 100%;
	}
	.tick_m{
		height: 1rem;
		margin-left: .4rem;
	}
	.tick_item{
		display: flex;
		height: 1rem;
		justify-content: space-between;
	}
	.tick_item .printName{
		font-size: .39rem;
		align-items: center;
	}
	.tick_m ul{
		display: flex;
		height: 1.45rem;
		flex-direction: column;
		justify-content: space-between;
	}
	.location{
		color: #4088EE;
		font-size: .33rem;
	}
	.location img{
		height: .4rem;
		vertical-align: -.07rem;
		margin-left: .1rem;
	}
	.title{
		font-size: .42rem;
		height: .8rem;
		line-height: .8rem;
	}
	.enger_t{
		height: 1.3rem;
		align-items: center;
		justify-content: space-between;
		display: flex;
		padding: 0 0 0 0;
		border-bottom: 1px solid #ebedf0;
	}
	.add{
		width: 2rem;
		height: .8rem;
		font-size: .37rem;
		border: none;
		border-radius: .15rem;
		background: linear-gradient(45deg, #62b0fb, #438bf7);
		color: #fff;
	}
	.padd0{
		padding-top: 0;
	}
	.mbox .van-cell{
		padding-left: 0;
		padding-right: 0;
	}
  .phonenum {
		font-size: .42rem !important; 
		width: 2rem !important;
	}
	.agree{
		font-size: .34rem;
		margin: .35rem .6rem 0 .6rem;
		line-height: .52rem;
		color: #9C9B9B;
		padding-bottom: 2.5rem;
	}
	.agree span{
		color: #4088EE;
		font-size: .34rem;
		margin-left: .1rem;
		margin-top: 2rem;
	}
	.subBar{
		position: fixed;
		left:0;
		right:0;
		bottom:0;
		height: 1.5rem;
		background: #fff;
		z-index: 1000;
		padding: 0 .4rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 200000000000;
	}
	.arrTime{
		color: #999;
		font-size: .36rem !important;
	}
	.way{
		color:#4088EE;
		font-size: .37rem;
	}
	.phonebox{
		padding-top: 0;
		padding-bottom: 0;
	}
	.price{
		height: 1.5rem;
		color: #FB5D57;
		font-size: .6rem;
		display: flex;
		align-items: center;
	}
	.price span{
		font-size: .45rem;
	}
	.topay{
		background: linear-gradient(45deg, #62b0fb, #438bf7);
		width: 2.5rem;
		height: 1rem;
		border-radius: 1rem;
		font-size: .4rem;
		color: #fff;
		border: none;
		outline: none;
		box-shadow: 0.05333rem 0.13333rem 0.4rem rgba(93, 170, 250, 0.3);
	}
	.sunbarR{
		display: flex;
		justify-content: space-between;
		width: 4rem;
		align-items: center;
	}
	.sunbarR .detail{
		color: #999;
		font-size: .33rem;
	}
	.sunbarR .arrow{
		margin-left: .1rem;
		vertical-align: -.09rem;
		width: .43rem;
		height: .43rem;
		background-image: url(~@/assets/images/searchBus/arrowup.png);
		background-size: 100%;
		background-repeat: no-repeat;
		display:inline-block;
		transition: .2s ease;
	}
	.sunbarR .arrow.rotate{
		transform: rotate(180deg);
	}

	.popbody{
		padding-left: .3rem;
		padding-right: .3rem;
	}
	.pricePop{
		overflow-y: hidden;
	}
	.pricePop .title{
		text-align: center;
		padding: .2rem;
		font-size: .4rem;
	}
	.priceitem{
		padding: .42rem 0;
		font-size: .36rem;
		display: flex;
		justify-content: space-between;
		border-top:0.02667rem solid #ebedf0;
	}
	.orangeP{
		color: #FB5D57;
		font-size: .4rem;
	}
	.pageBg{
		height: 100%
	}
	.popmain{
		position: relative;
		height: 100%;
		padding-top: .35rem;
	}
	.popmain .pricePop{
		bottom:1.5rem;
	}
	.sure{
		background: linear-gradient(45deg, #62b0fb, #438bf7);
		width: 4rem;
		height: 1rem;
		border-radius: .15rem;
		font-size: .37rem;
		color: #fff;
		border: none;
		outline: none;
		text-align: center;
		line-height: 1rem;
	}
	.infoPop{
		padding:.2rem .5rem .3rem .5rem;
		width: 85%;
		height: 68%;
		border-radius: .15rem;
		box-sizing: border-box;
		overflow-y: hidden;
	}
	.infoPop .sure{
		position: absolute;
		bottom: 0;
		left:50%;
		transform: translateX(-50%);
		z-index: 2;
	}
	.popBox{
		position: relative;
		height: 100%;
	}
  .infoPopbox{
		position: absolute;
		left: 0;
		right: 0;
		top:.7rem;
		bottom:1.5rem;
		overflow-y: auto;
		z-index: 1;
	}
	.info_t{
		text-align: center;
		font-size: .45rem;
		position: absolute;
		left: 0;
		right: 0;
		top:0;
		z-index: 2;
		background-color: #fff;
	}
	.infoPopbox h2{
		font-size: .38rem;
		margin-bottom: .15rem;
		margin-top: .15rem;
	}
	.infoPopbox p{
		font-size: .35rem;
	}
	.ticket_bottom{
		margin-top: .2rem;
		display: flex;
		justify-content: space-between;
		height:.5rem;
		align-items: center;
	}
	.ticket_line{
		color: #4088EE;
		font-size: .33rem;
	}
	.info_b p{
		font-size: .37rem;
	}
	.linePop{
		width: 85%;
		height: 55%;
		border-radius: .15rem;
		box-sizing: border-box;
		overflow-y: hidden;
	}
	.linePop >div{
		position: relative;
		height: 100%;
	}
	.linepop_t{
		position: absolute;
		left:0;
		right: 0;
		top:0;
		z-index: 2;
		height: 1.5rem;
		font-size: .45rem;
		color: #fff;
		line-height: 1.5rem;
		text-align: center;
		background: url(~@/assets/images/searchBus/poptitle.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: bottom center;
	}
	.linepop_b{
		position: absolute;
		left:0;
		right: 0;
		bottom: .35rem;
		top:1.8rem;
		z-index: 1;
		overflow-y: auto;
	}
	.linepop_b ul{
		position: relative;
	}
	.linepop_b ul:after{
		position: absolute;
		content: "";
		height: 100%;
		top:0;
		left:50%;
		width: 2px;
		margin-left: -1px;
		border-left: 1px dashed #62b0fb;
	}
	.linepop_b li{
		position: relative;
		width: 100%;
		height: 1rem;
	}
	.line_l{
		font-size: .36rem;
		float: left;
		width: 45%;
		height: 100%;
		line-height: 1rem;
		text-align: right;
	}
	.line_r{
		font-size: .36rem;
		float: right;
		width: 45%;
		height: 100%;
		line-height: 1rem;
		text-align: left;
	}
	.linepop_b li:after{
		content: "";
		display: block;
		width: .2rem;
		height: .2rem;
		border-radius: 100%;
		background-color:#62b0fb ;
		position: absolute;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
	}
	.lineLoad{
		position: absolute;
		left: 50%;
		top:45%;
		transform: translate(-50%,-50%);
	}
	.stopname{
		padding-top: .1rem;
	}
</style>
